<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>旋转木马轮播图</title>
  <link rel="stylesheet" href="css/xzmm.css" />


</head>

<body>
  <div class="wrap" id="wrap">
    <div class="slide" id="slide">
      <ul>
        <li><a href="#"><img src="image/Tulips.jpg" alt="" /></a></li>
        <li><a href="#"><img src="image/Chrysanthemum.jpg" alt="" /></a></li>
        <li><a href="#"><img src="image/Hydrangeas.jpg" alt="" /></a></li>
        <li><a href="#"><img src="image/Lighthouse.jpg" alt="" /></a></li>
        <li><a href="#"><img src="image/Penguins.jpg" alt="" /></a></li>
      </ul>
      <div class="arrow" id="arrow">
        <a href="javascript:;" class="prev" id="arrLeft"></a>
        <a href="javascript:;" class="next" id="arrRight"></a>
      </div>
    </div>
  </div>
  <script src="./js/animate.js"></script>
  <script>
    //
    var config = [
      {
        width: 400,
        top: 20,
        left: 50,
        opacity: 0.2,
        zIndex: 2
      },//0
      {
        width: 600,
        top: 70,
        left: 0,
        opacity: 0.8,
        zIndex: 3
      },//1
      {
        width: 800,
        top: 100,
        left: 200,
        opacity: 1,
        zIndex: 4
      },//2
      {
        width: 600,
        top: 70,
        left: 600,
        opacity: 0.8,
        zIndex: 3
      },//3
      {
        width: 400,
        top: 20,
        left: 750,
        opacity: 0.2,
        zIndex: 2
      }//4

    ];
    // 思路
    // 1.刚打开浏览器 让图片 分布好

    // 2.把数组中的样式给每个li

    // 3.点击让li进行移动 
    // 数组的方法 push unshift       pop  shift
    // var arr = [1,2,3,4,5]


    // 步骤：
    var flag = true;
    // 1.获取元素
    var aLi = document.querySelectorAll('li');
    // 2.遍历每个li
    function assign() {
      for (var i = 0; i < aLi.length; i++) {
        // 2.1.把上面数组中的样式给每个li
        animate(aLi[i], config[i], function () {
          flag = true;
        })
      }
    }

    assign();


    // 3.点击左边按钮 让轮播图向左转
    // 3.1 获取左边按钮
    var prevBtn = document.querySelector('.prev');
    // 3.2 获取config中的最后一个对象元素 放到第一个
    prevBtn.onclick = function () {
      if (flag) {
        flag = false;
        config.unshift(config.pop());
        //  3.2.1 等数组中的元素变了之后 让页面重新布局
        assign();
      }
    }

    // 4.点击右边按钮 让轮播图向右转
    // 4.1 获取右边按钮
    var nextBtn = document.querySelector('.next');
    // 4.2 给按钮添加点击事件
    nextBtn.onclick = function () {
      if (flag) {
        // 4.2.1 获取数组中的第一个元素 放到最后一个
        config.push(config.shift());
        // 4.2.2 重新布局
        assign();
      }
    }
    // 锁
    // 每次点击 等待 图片都放好位置了 才允许下一次点击

  </script>
</body>

</html>